<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-44">
			<view class="flex-row justify-center relative">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796370892020948020.png" />
				<text class="font_1 text">桌台管理</text>
			</view>
			<!-- <view class="flex-row justify-between items-end">
				<view class="flex-row items-end space-x-5">
					<text class="text_3">铁西沈辽路店</text>
					<view class="flex-col justify-start items-center shrink-0 text-wrapper"><text
							class="text_2">在线</text></view>
				</view>
			</view> -->
		</view>
		<view class="flex-col relative group_2 space-y-455">
			<view class="grid">
				<view class="flex-col items-center grid-item space-y-21">
					<text class="font_3">{{numList.all}}</text>
					<text class="font_4">总桌台</text>
				</view>
				<view class="flex-col items-center grid-item_2 space-y-22">
					<text class="font_3 text_5">{{numList.work}}</text>
					<text class="font_4">使用中</text>
				</view>
				<view class="flex-col items-center grid-item_2 space-y-21">
					<text class="font_3">{{numList.down}}</text>
					<text class="font_4">空闲</text>
				</view>
				<view class="flex-col grid-item_4 space-y-16" v-for="item in ballList" @click="detail(item)">
					<view class="flex-col items-center relative section_2 space-y-11">
						<text class="font_1">{{item.f_eq_no}}</text>
						<text class="font_5">{{item.f_union_code}}</text>
					</view>
					<text class="self-center font_4">{{item.f_status==0?'空闲中':'对局中'}}</text>
				</view>

			</view>
			<view class="flex-col justify-start items-center button" @click="addequip"><text class="text_6">添加设备</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				ballList: {},
				numList: {},
			};
		},
		onLoad() {
			if (uni.getStorageSync('Bshop_name') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺哦！'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			}
			this.equipment()
		},
		onShow() {
			this.equipment()
		},
		methods: {
			//设备列表
			equipment() {
				this.$Api.EqList({
					shopId: uni.getStorageSync('Bshop_id'),
					page: 1,
					pageNum: 15

				}).then(res => {
					this.ballList = res.data.data
					this.numList = res.data.num
					console.log(this.ballList[0].f_eq_no, '设备列表')
					console.log(res.data.num, 'num列表')
				})
			},
			addequip() {

				uni.navigateTo({
					url: '/pagesB/addEquip/addEquip'
				})
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			detail(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pagesB/alterEquip/alterEquip?table=' + item.f_eq_no + '&code=' + item.f_union_code +
						'&id=' + item.id  + '&img=' + item.f_img_url+ '&type=' + item.f_eq_type + '&name=' + item.f_eq_name
				})
			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 60rpx;
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 105rpx 30rpx 496rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-44>view:not(:first-child),
	.space-y-44>text:not(:first-child),
	.space-y-44>image:not(:first-child) {
		margin-top: 44rpx;
	}

	.image {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_1 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.text {
		line-height: 34rpx;
	}

	.space-x-5>view:not(:first-child),
	.space-x-5>text:not(:first-child),
	.space-x-5>image:not(:first-child) {
		margin-left: 5rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.text-wrapper {
		padding: 10rpx 0;
		background-image: linear-gradient(90deg, #ffa229 0%, #ffca29 100%);
		border-radius: 10rpx 10rpx 10rpx 0px;
		width: 88rpx;
		height: 44rpx;
		border: solid 1rpx #ffa229;
	}

	.text_2 {
		color: #222222;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22rpx;
	}

	.group {
		margin-right: 3rpx;
		margin-bottom: 4rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.text_4 {
		line-height: 23rpx;
	}

	.image_2 {
		width: 24rpx;
		height: 22rpx;
	}

	.group_2 {
		margin-top: -456rpx;
		padding: 0 30rpx;
	}

	.space-y-455>view:not(:first-child),
	.space-y-455>text:not(:first-child),
	.space-y-455>image:not(:first-child) {
		margin-top: 55rpx;
	}

	.grid {
		padding: 2rpx 16rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
		/* height: 752rpx; */
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-item {
		padding: 52rpx 0 50rpx;
	}

	.font_3 {
		font-size: 52rpx;
		font-family: PingFang SC;
		line-height: 39rpx;
		font-weight: 700;
		color: #222222;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.grid-item_2 {
		padding: 52rpx 0 50rpx;
		width: 219rpx;
	}

	.space-y-21>view:not(:first-child),
	.space-y-21>text:not(:first-child),
	.space-y-21>image:not(:first-child) {
		margin-top: 21rpx;
	}

	.space-y-22>view:not(:first-child),
	.space-y-22>text:not(:first-child),
	.space-y-22>image:not(:first-child) {
		margin-top: 22rpx;
	}

	.text_5 {
		line-height: 38rpx;
	}

	.grid-item_3 {
		padding: 0 14rpx 42rpx;
	}

	.section_2 {
		margin-top: -16rpx;
		padding: 31rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16796370892381024099.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #fefffef7;
	}

	.grid-item_4 {
		padding: 0 14rpx 42rpx;
		width: 219rpx;
	}

	.grid-item_5 {
		padding: 0 14rpx 51rpx;
	}

	.view {
		margin-top: -24rpx;
	}

	.space-y-11>view:not(:first-child),
	.space-y-11>text:not(:first-child),
	.space-y-11>image:not(:first-child) {
		margin-top: 11rpx;
	}

	.grid-item_6 {
		padding: 0 12rpx 51rpx 16rpx;
		width: 219rpx;
	}

	.section_3 {
		margin-top: -24rpx;
		padding: 32rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16796369838948694025.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.grid-item_7 {
		padding: 0 10rpx 51rpx 18rpx;
		width: 219rpx;
	}

	.grid-item_8 {
		padding: 0 14rpx 59rpx;
	}

	.section_4 {
		margin-top: -32rpx;
		padding: 32rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16796370892573701953.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.font_6 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 700;
		color: #0e6031;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #0e6031;
	}

	.grid-item_9 {
		padding: 0 12rpx 59rpx 18rpx;
		width: 219rpx;
	}

	.space-y-16>view:not(:first-child),
	.space-y-16>text:not(:first-child),
	.space-y-16>image:not(:first-child) {
		margin-top: 16rpx;
	}

	.section_5 {
		margin-top: -32rpx;
		padding: 32rpx 0;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16796369839054690990.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.space-y-10>view:not(:first-child),
	.space-y-10>text:not(:first-child),
	.space-y-10>image:not(:first-child) {
		margin-top: 10rpx;
	}

	.button {
		padding: 30rpx 0;
		background-color: #19c865;
		border-radius: 44rpx;
	}

	.text_6 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}
</style>
